<template>
	<div class="collect">
		<x-header title="我的收藏" :left-options="{backText:''}" class='whiteHeader'></x-header>
		<div class="collectNav">
			<div class="collectNavLeft" @click="advertiser">
				<p :class="{isBlack1:isBlack1,isRed1:isRed1}">商家</p>
				<div :class="{navLine:isShow1}"></div>
			</div>
			<div class="vLine"></div>
			<div class="collectNavRight" @click="news">
				<p :class="{isBlack2:isBlack2,isRed2:isRed2}">资讯</p>
				<div :class="{navLine:isShow2}"></div>
			</div>
		</div>

		<div class="vux-1px-t">
			<swipeout>
				<swipeout-item transition-mode="follow" class="advertiserList" v-if="category==1&&allData.length!=0" v-for="(items,key) in allData" :key="key">
					<div slot="right-menu" class="right-menu">
						<swipeout-button type="warn" @click.native="collectDel(items.UF_ID)">
							<img src="../../assets/image/collectDel.png" alt="" />
							<!--<p>删除</p>-->
						</swipeout-button>
					</div>
					<div slot="content" class="demo-content vux-1px-t" @click="goStoreDetail(items.COMP_ID,items.COORDINATE)">
						<div class="adImg">
							<img :src="imgUrl+items.PHOTO_PATH" alt="" />
						</div>
						<div class="adText">
							<div class="adShop">
								<p>{{items.SHOP_NAME}}</p>
							</div>
							<div class="adAddress">
								<p>{{items.ADDRESS}}</p>
							</div>
						</div>
					</div>
				</swipeout-item>
			</swipeout>
		</div>
		<div class="vux-1px-t">
			<swipeout>
				<swipeout-item transition-mode="follow" class="advertiserList" v-if="category==2&&allData.length!=0" v-for="(items,key) in allData" :key="key">
					<div slot="right-menu" class="right-menu">
						<swipeout-button type="warn" @click.native="collectDel(items.UF_ID)">
							<img src="../../assets/image/collectDel.png" alt="" />
							<!--<p>删除</p>-->
						</swipeout-button>
					</div>
					<div slot="content" class="demo-content vux-1px-t" @click="goDiscoverDetail(items.ART_ID)">
						<div class="adImg">
							<img :src="imgUrl+items.IMG_PATH" alt="" />
						</div>
						<div class="adText">
							<div class="adShop">
								<p>{{items.SUBJECT}}</p>
							</div>
							<div class="adAddress">
								<p>{{items.CREATE_DATE|filterTimes}}</p>
							</div>
						</div>
					</div>
				</swipeout-item>
			</swipeout>
		</div>
	</div>
</template>
<script>
	/*我的收藏*/
	import { XHeader, Swipeout, SwipeoutItem, SwipeoutButton } from 'vux';
	import { setCookie, getCookie } from '../../util/commonUtils';
	export default {
		name: "collect",
		// 数据
		data() {

			return {
				userId: '',
				isRed1: true, //是否红色
				isRed2: false, //是否红色
				isBlack1: false, //是否黑色
				isBlack2: true, //是否黑色
				isShow1: true, //是否显示
				isShow2: false, //是否显示
				category: 1, //类型1-商铺2-资讯
				imgUrl: '', //商家或资讯封面url
				allData: '', //商家或资讯数据
				disabled: false, //滑动删除是否可用
			}
		},
		// 计算属性
		computed: {

		},
		// 创建（实例创建完成）
		created() {
			this.userId=getCookie('loginkey');
			let obj = {};
			obj.USER_ID = this.userId;
			obj.CATEGORY = this.category;
			obj.LAST_UF_ID = '';
			//我的收藏列表
			this.$fetchGet('/UserFavoriteWeb/getUserFavorite', obj).then(res => {
				if(res.STATUS_CODE == 1) {
					this.imgUrl = res.IMG_URL;
					this.allData = res.RESULT_DATA;
					//console.dir(res);
				}
			}, err => console.log(err));

		},
		// el被创建，并挂载到实例上
		mounted() {

		},
		// 方法（实例中的方法）-----------
		methods: {
			//商家
			advertiser() {
				this.allData = '';
				this.isShow1 = true;
				this.isShow2 = false;
				this.isRed1 = true;
				this.isBlack1 = false;
				this.isRed2 = false;
				this.isBlack2 = true;
				this.category = 1;
				let obj = {};
				obj.USER_ID = this.userId;
				obj.CATEGORY = this.category;
				obj.LAST_UF_ID = '';
				//我的收藏列表
				this.$fetchGet('/UserFavoriteWeb/getUserFavorite', obj).then(res => {
					if(res.STATUS_CODE == 1) {
						this.imgUrl = res.IMG_URL;
						this.allData = res.RESULT_DATA;
						//console.dir(res);
					}
				}, err => console.log(err));
			},
			//资讯
			news() {
				this.allData = '';
				this.isShow1 = false;
				this.isShow2 = true;
				this.isRed1 = false;
				this.isBlack1 = true;
				this.isRed2 = true;
				this.isBlack2 = false;
				this.category = 2;
				let obj = {};
				obj.USER_ID = this.userId;
				obj.CATEGORY = this.category;
				obj.LAST_UF_ID = '';
				//我的收藏列表
				this.$fetchGet('/UserFavoriteWeb/getUserFavorite', obj).then(res => {
					if(res.STATUS_CODE == 1) {
						this.imgUrl = res.IMG_URL;
						this.allData = res.RESULT_DATA;
						//console.dir(res);
					}
				}, err => console.log(err));
			},
			//删除收藏
			collectDel(id) {
				let obj = {};
				obj.USER_ID = this.userId;
				obj.UF_IDS = id;
				this.$fetchPost('/UserFavoriteWeb/removeFavoriteByIds', obj).then(res => {
					if(res.STATUS_CODE == 1) {
						let objj = {};
						objj.USER_ID = this.userId;
						objj.CATEGORY = this.category;
						objj.LAST_UF_ID = '';
						//我的收藏列表
						this.$fetchGet('/UserFavoriteWeb/getUserFavorite', objj).then(res => {
							if(res.STATUS_CODE == 1) {
								this.allData = res.RESULT_DATA;
							}
						}, err => console.log(err));
					}
				}, err => console.log(err));
			},
			//门店详情
			goStoreDetail(id,COORDINATE){
				this.$router.push('/storeDetail/'+id+'?coordinate='+COORDINATE);
			},
			//发现详情
			goDiscoverDetail(id){
				this.$router.push('/discoverDetail/' + id);
			},
		},
		// 子组件
		components: {
			XHeader,
			Swipeout,
			SwipeoutItem,
			SwipeoutButton
		}
	}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
	.vux-header{
		border-bottom:1px solid #fefefe;
	}
	.collect {
		width: 7.5rem;
		overflow: hidden;
		background: #fff;
		.collectNav {
			height: 0.8rem;
			border-bottom: 0.01rem solid #dddddd;
			display: flex;
			.collectNavLeft {
				width: 100%;
				height: 100%;
				display: flex;
				flex-flow: column;
				justify-content: center;
				position: relative;
				p {
					font-size: 0.3rem;
					align-self: center;
				}
				.navLine {
					position: absolute;
					bottom: 0;
					left: 1.2rem;
					width: 1.3rem;
					height:0.04rem;
					background:#ec383f;
				}
				.isBlack1 {
					color: #333;
				}
				.isRed1 {
					color: #ec383f;
				}
				h2 {
					width: 1.34rem;
					height: 0.04rem;
					align-self: center;
					position: absolute;
					bottom: 0;
					hr {
						width: 1.4rem;
						position: absolute;
						bottom: 0;
						left: 1.2rem;
						border: none;
						border-bottom: 0.01rem solid #ec383f;
						color: #ec383f;
					}
				}
			}
			.vLine {
				height: 0.50rem;
				margin-top: 0.15rem;
				border: 0.01rem solid #dddddd;
			}
			.collectNavRight {
				width: 100%;
				height: 100%;
				display: flex;
				flex-flow: column;
				justify-content: center;
				position: relative;
				p {
					font-size: 0.3rem;
					align-self: center;
				}
				.navLine {
					position: absolute;
					bottom: 0;
					left: 1.2rem;
					width: 1.3rem;
					height:0.04rem;
					background:#ec383f;
				}
				.isBlack2 {
					color: #333;
				}
				.isRed2 {
					color: #ec383f;
				}
				h2 {
					width: 1.34rem;
					height: 0.04rem;
					align-self: center;
					position: absolute;
					bottom: 0;
					hr {
						width: 1.4rem;
						position: absolute;
						bottom: 0;
						left: 1.2rem;
						border: none;
						border-bottom: 0.01rem solid #ec383f;
						color: #ec383f;
					}
				}
			}
		}
		.vux-1px-t {
			.advertiserList {
				height: 1.7rem;
				display: flex;
				border-bottom: 0.01rem solid #dddddd;
				.right-menu {
					img {
						width: 0.32rem;
						height: 0.32rem;
					}
				}
				.demo-content {
					position:relative;
					.adImg {
						position:absolute;
						top:0;
						left:0;
						width: 1.5rem;
						height: 100%;
						display: flex;
						img {
							width: 1.5rem;
							height: 1.125rem;
							border-radius: 0.04rem;
						}
					}
					.adText {
						width: 6.04rem;
						height: 100%;
						.adShop {
							width: 100%;
							p {
								width: 95%;
								height: 0.8rem;
								font-size: 0.3rem;
								color: #222;
								text-align: left;
								margin-left: 1.8rem;
								margin-top: 0.34rem;
								/*让文字只显示2行，其余用...代替start*/
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								/*让文字只显示2行，其余用...代替end*/
							}
						}
						.adAddress {
							width: 100%;
							p {
								width: 100%;
								height: 0.35rem;
								font-size: 0.3rem;
								color: #999;
								text-align: left;
								//margin-top:0.2rem;
								margin-left: 1.8rem;
							}
						}
					}
				}
			}
		}
	}
</style>
